<template>
  <div>

    <basic-container>
      <vue-element-loading :active="loading" spinner="bar-fade-scale" color="#409eff" background-color="rgba(255,255,255,0.2)"/>
      <el-form :inline="true" :model="formInline" >
        <div style="margin-top: 22px">
          <el-form-item>
            <el-select v-model="formInline.gameName" filterable clearable placeholder="游戏名称">
              <el-option
                v-for="item in gamelist"
                :key="item.gameName"
                :label="item.gameName"
                :value="item.gameName"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="time"
              clearable
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </div>
      </el-form>
      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%"
        :cell-class-name="tableRowClassName">
        <el-table-column
          prop="time"
          label="日期">
        </el-table-column>
        <el-table-column
          prop="usercount"
          label="日付费用户">
        </el-table-column>
        <el-table-column
          prop="d1"
          label="次日付费"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.d1 < 0">-</span>
            <span v-if="scope.row.d1 >= 0">{{scope.row.d1}}%</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="d2"
          label="2日付费">
          <template slot-scope="scope">
            <span v-if="scope.row.d2 < 0">-</span>
            <span v-if="scope.row.d2 >= 0">{{scope.row.d2}}%</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="d3"
          label="3日付费">
          <template slot-scope="scope">
            <span v-if="scope.row.d3 < 0">-</span>
            <span v-if="scope.row.d3 >= 0">{{scope.row.d3}}%</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="d4"
          label="4日付费">
          <template slot-scope="scope">
            <span v-if="scope.row.d4 < 0">-</span>
            <span v-if="scope.row.d4 >= 0">{{scope.row.d4}}%</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="d5"
          label="5日付费">
          <template slot-scope="scope">
            <span v-if="scope.row.d5 < 0">-</span>
            <span v-if="scope.row.d5 >= 0">{{scope.row.d5}}%</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="d6"
          label="6日付费">
          <template slot-scope="scope">
            <span v-if="scope.row.d6 < 0">-</span>
            <span v-if="scope.row.d6 >= 0">{{scope.row.d6}}%</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="d7"
          label="7日付费">
          <template slot-scope="scope">
            <span v-if="scope.row.d7 < 0">-</span>
            <span v-if="scope.row.d7 >= 0">{{scope.row.d7}}%</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="d8"
          label="8日付费">
          <template slot-scope="scope">
            <span v-if="scope.row.d8 < 0">-</span>
            <span v-if="scope.row.d8 >= 0">{{scope.row.d8}}%</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="d9"
          label="9日付费">
          <template slot-scope="scope">
            <span v-if="scope.row.d9 < 0">-</span>
            <span v-if="scope.row.d9 >= 0">{{scope.row.d9}}%</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="d10"
          label="10日付费">
          <template slot-scope="scope">
            <span v-if="scope.row.d10 < 0">-</span>
            <span v-if="scope.row.d10 >= 0">{{scope.row.d10}}%</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="d11"
          label="11日付费">
          <template slot-scope="scope">
            <span v-if="scope.row.d11 < 0">-</span>
            <span v-if="scope.row.d11 >= 0">{{scope.row.d11}}%</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="d12"
          label="12日付费">
          <template slot-scope="scope">
            <span v-if="scope.row.d12 < 0">-</span>
            <span v-if="scope.row.d12 >= 0">{{scope.row.d12}}%</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="d13"
          label="13日付费">
          <template slot-scope="scope">
            <span v-if="scope.row.d13 < 0">-</span>
            <span v-if="scope.row.d13 >= 0">{{scope.row.d13}}%</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="d14"
          label="14日付费">
          <template slot-scope="scope">
            <span v-if="scope.row.d14 < 0">-</span>
            <span v-if="scope.row.d14 >= 0">{{scope.row.d14}}%</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="d15"
          label="15日付费">
          <template slot-scope="scope">
            <span v-if="scope.row.d15 < 0">-</span>
            <span v-if="scope.row.d15 >= 0">{{scope.row.d15}}%</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="d21"
          label="21日付费">
          <template slot-scope="scope">
            <span v-if="scope.row.d21 < 0">-</span>
            <span v-if="scope.row.d21 >= 0">{{scope.row.d21}}%</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="d30"
          label="30日付费">
          <template slot-scope="scope">
            <span v-if="scope.row.d30 < 0">-</span>
            <span v-if="scope.row.d30 >= 0">{{scope.row.d30}}%</span>
          </template>
        </el-table-column>
      </el-table>
    </basic-container>

  </div>
</template>

<script>

import {mapGetters} from "vuex";
import {queryGamesQr, getNewPayUserAccountAnalysis} from "@/api/system/details";
import VueElementLoading from 'vue-element-loading'
import moment from "moment";
export default {
  name: "activity",
  data() {
    return {
      loading: false,
      selectData:'',
      // 日期选择器配置
      pickerOptions: {
        //首先是选择出开始时间，根据开始时间给出可选的六个月时间范围
        onPick: ({maxDate, minDate}) => {
          console.log(maxDate, minDate)
          this.selectData = minDate.getTime();
          if (maxDate) {
            // 解除限制
            this.selectData = '';
          }
        },
        disabledDate:(time) => {

          // console.log(this.selectData);
          if(this.selectData != '') {
            const oneMonth = 30 * 24 * 3600 * 1000;
            const minTime = this.selectData - oneMonth;
            const maxTime = this.selectData + oneMonth;
            return time.getTime() < minTime || time.getTime() > maxTime;
          }
        }
      },
      formInline: {
        gameName: '',
        startTime:'',
        endTime:'',
      },
      time: [new Date(moment().subtract(30, 'days').calendar().valueOf()), new Date()],
      gamelist: [],
      tableData:[],
    };

  },
  computed: {

  },
  components: {
    VueElementLoading
  },
  created() {
    this.nowload()
    this.loadGames()
  },
  methods: {
    loadGames() {
      queryGamesQr().then(res => {
        this.gamelist = res.data.data
      })
    },
    tableRowClassName({row,column,rowIndex,columnIndex}){
      if(columnIndex == 2) {
        if (row.d1 >= 90 && row.d1 <= 100) {
          return 'c10'
        } else if (row.d1 >= 80 && row.d1 < 90) {
          return 'c9'
        } else if (row.d1 >= 70 && row.d1 < 80) {
          return 'c8'
        } else if (row.d1 >= 60 && row.d1 < 70) {
          return 'c7'
        } else if (row.d1 >= 50 && row.d1 < 60) {
          return 'c6'
        } else if (row.d1 >= 40 && row.d1 < 50) {
          return 'c5'
        } else if (row.d1 >= 30 && row.d1 < 40) {
          return 'c4'
        } else if (row.d1 >= 20 && row.d1 < 30) {
          return 'c3'
        } else if (row.d1 >= 10 && row.d1 < 20) {
          return 'c2'
        } else if (row.d1 >= 5 && row.d1 < 10) {
          return 'c1'
        } else if (row.d1 >= 0 && row.d1 < 5) {
          return 'c0'
        } else if (row.d1 < 0) {
          return 'c0'
        } else {
          return ''
        }
      } else if(columnIndex == 3) {
        if (row.d2 >= 90 && row.d2 <= 100) {
          return 'c10'
        } else if (row.d2 >= 80 && row.d2 < 90) {
          return 'c9'
        } else if (row.d2 >= 70 && row.d2 < 80) {
          return 'c8'
        } else if (row.d2 >= 60 && row.d2 < 70) {
          return 'c7'
        } else if (row.d2 >= 50 && row.d2 < 60) {
          return 'c6'
        } else if (row.d2 >= 40 && row.d2 < 50) {
          return 'c5'
        } else if (row.d2 >= 30 && row.d2 < 40) {
          return 'c4'
        } else if (row.d2 >= 20 && row.d2 < 30) {
          return 'c3'
        } else if (row.d2 >= 10 && row.d2 < 20) {
          return 'c2'
        } else if (row.d2 >= 5 && row.d2 < 10) {
          return 'c1'
        } else if (row.d2 >= 0 && row.d2 < 5) {
          return 'c0'
        } else if (row.d2 < 0) {
          return 'c0'
        } else {
          return ''
        }
      } else if(columnIndex == 4) {
        if (row.d3 >= 90 && row.d3 <= 100) {
          return 'c10'
        } else if (row.d3 >= 80 && row.d3 < 90) {
          return 'c9'
        } else if (row.d3 >= 70 && row.d3 < 80) {
          return 'c8'
        } else if (row.d3 >= 60 && row.d3 < 70) {
          return 'c7'
        } else if (row.d3 >= 50 && row.d3 < 60) {
          return 'c6'
        } else if (row.d3 >= 40 && row.d3 < 50) {
          return 'c5'
        } else if (row.d3 >= 30 && row.d3 < 40) {
          return 'c4'
        } else if (row.d3 >= 20 && row.d3 < 30) {
          return 'c3'
        } else if (row.d3 >= 10 && row.d3 < 20) {
          return 'c2'
        } else if (row.d3 >= 5 && row.d3 < 10) {
          return 'c1'
        } else if (row.d3 >= 0 && row.d3 < 5) {
          return 'c0'
        } else if (row.d3 < 0) {
          return 'c0'
        } else {
          return ''
        }
      } else if(columnIndex == 5) {
        if (row.d4 >= 90 && row.d4 <= 100) {
          return 'c10'
        } else if (row.d4 >= 80 && row.d4 < 90) {
          return 'c9'
        } else if (row.d4 >= 70 && row.d4 < 80) {
          return 'c8'
        } else if (row.d4 >= 60 && row.d4 < 70) {
          return 'c7'
        } else if (row.d4 >= 50 && row.d4 < 60) {
          return 'c6'
        } else if (row.d4 >= 40 && row.d4 < 50) {
          return 'c5'
        } else if (row.d4 >= 30 && row.d4 < 40) {
          return 'c4'
        } else if (row.d4 >= 20 && row.d4 < 30) {
          return 'c3'
        } else if (row.d4 >= 10 && row.d4 < 20) {
          return 'c2'
        } else if (row.d4 >= 5 && row.d4 < 10) {
          return 'c1'
        } else if (row.d4 >= 0 && row.d4 < 5) {
          return 'c0'
        } else if (row.d4 < 0) {
          return 'c0'
        } else {
          return ''
        }
      } else if(columnIndex == 6) {
        if (row.d5 >= 90 && row.d5 <= 100) {
          return 'c10'
        } else if (row.d5 >= 80 && row.d5 < 90) {
          return 'c9'
        } else if (row.d5 >= 70 && row.d5 < 80) {
          return 'c8'
        } else if (row.d5 >= 60 && row.d5 < 70) {
          return 'c7'
        } else if (row.d5 >= 50 && row.d5 < 60) {
          return 'c6'
        } else if (row.d5 >= 40 && row.d5 < 50) {
          return 'c5'
        } else if (row.d5 >= 30 && row.d5 < 40) {
          return 'c4'
        } else if (row.d5 >= 20 && row.d5 < 30) {
          return 'c3'
        } else if (row.d5 >= 10 && row.d5 < 20) {
          return 'c2'
        } else if (row.d5 >= 5 && row.d5 < 10) {
          return 'c1'
        } else if (row.d5 >= 0 && row.d5 < 5) {
          return 'c0'
        } else if (row.d5 < 0) {
          return 'c0'
        } else {
          return ''
        }
      } else if(columnIndex == 7) {
        if (row.d6 >= 90 && row.d6 <= 100) {
          return 'c10'
        } else if (row.d6 >= 80 && row.d6 < 90) {
          return 'c9'
        } else if (row.d6 >= 70 && row.d6 < 80) {
          return 'c8'
        } else if (row.d6 >= 60 && row.d6 < 70) {
          return 'c7'
        } else if (row.d6 >= 50 && row.d6 < 60) {
          return 'c6'
        } else if (row.d6 >= 40 && row.d6 < 50) {
          return 'c5'
        } else if (row.d6 >= 30 && row.d6 < 40) {
          return 'c4'
        } else if (row.d6 >= 20 && row.d6 < 30) {
          return 'c3'
        } else if (row.d6 >= 10 && row.d6 < 20) {
          return 'c2'
        } else if (row.d6 >= 5 && row.d6 < 10) {
          return 'c1'
        } else if (row.d6 >= 0 && row.d6 < 5) {
          return 'c0'
        } else if (row.d6 < 0) {
          return 'c0'
        } else {
          return ''
        }
      } else if(columnIndex == 8) {
        if (row.d7 >= 90 && row.d7 <= 100) {
          return 'c10'
        } else if (row.d7 >= 80 && row.d7 < 90) {
          return 'c9'
        } else if (row.d7 >= 70 && row.d7 < 80) {
          return 'c8'
        } else if (row.d7 >= 60 && row.d7 < 70) {
          return 'c7'
        } else if (row.d7 >= 50 && row.d7 < 60) {
          return 'c6'
        } else if (row.d7 >= 40 && row.d7 < 50) {
          return 'c5'
        } else if (row.d7 >= 30 && row.d7 < 40) {
          return 'c4'
        } else if (row.d7 >= 20 && row.d7 < 30) {
          return 'c3'
        } else if (row.d7 >= 10 && row.d7 < 20) {
          return 'c2'
        } else if (row.d7 >= 5 && row.d7 < 10) {
          return 'c1'
        } else if (row.d7 >= 0 && row.d7 < 5) {
          return 'c0'
        } else if (row.d7 < 0) {
          return 'c0'
        } else {
          return ''
        }
      } else if(columnIndex == 9) {
        if (row.d8 >= 90 && row.d8 <= 100) {
          return 'c10'
        } else if (row.d8 >= 80 && row.d8 < 90) {
          return 'c9'
        } else if (row.d8 >= 70 && row.d8 < 80) {
          return 'c8'
        } else if (row.d8 >= 60 && row.d8 < 70) {
          return 'c7'
        } else if (row.d8 >= 50 && row.d8 < 60) {
          return 'c6'
        } else if (row.d8 >= 40 && row.d8 < 50) {
          return 'c5'
        } else if (row.d8 >= 30 && row.d8 < 40) {
          return 'c4'
        } else if (row.d8 >= 20 && row.d8 < 30) {
          return 'c3'
        } else if (row.d8 >= 10 && row.d8 < 20) {
          return 'c2'
        } else if (row.d8 >= 5 && row.d8 < 10) {
          return 'c1'
        } else if (row.d8 >= 0 && row.d8 < 5) {
          return 'c0'
        } else if (row.d8 < 0) {
          return 'c0'
        } else {
          return ''
        }
      } else if(columnIndex == 10) {
        if (row.d9 >= 90 && row.d9 <= 100) {
          return 'c10'
        } else if (row.d9 >= 80 && row.d9 < 90) {
          return 'c9'
        } else if (row.d9 >= 70 && row.d9 < 80) {
          return 'c8'
        } else if (row.d9 >= 60 && row.d9 < 70) {
          return 'c7'
        } else if (row.d9 >= 50 && row.d9 < 60) {
          return 'c6'
        } else if (row.d9 >= 40 && row.d9 < 50) {
          return 'c5'
        } else if (row.d9 >= 30 && row.d9 < 40) {
          return 'c4'
        } else if (row.d9 >= 20 && row.d9 < 30) {
          return 'c3'
        } else if (row.d9 >= 10 && row.d9 < 20) {
          return 'c2'
        } else if (row.d9 >= 5 && row.d9 < 10) {
          return 'c1'
        } else if (row.d9 >= 0 && row.d9 < 5) {
          return 'c0'
        } else if (row.d9 < 0) {
          return 'c0'
        } else {
          return ''
        }
      } else if(columnIndex == 11) {
        if (row.d10 >= 90 && row.d10 <= 100) {
          return 'c10'
        } else if (row.d10 >= 80 && row.d10 < 90) {
          return 'c9'
        } else if (row.d10 >= 70 && row.d10 < 80) {
          return 'c8'
        } else if (row.d10 >= 60 && row.d10 < 70) {
          return 'c7'
        } else if (row.d10 >= 50 && row.d10 < 60) {
          return 'c6'
        } else if (row.d10 >= 40 && row.d10 < 50) {
          return 'c5'
        } else if (row.d10 >= 30 && row.d10 < 40) {
          return 'c4'
        } else if (row.d10 >= 20 && row.d10 < 30) {
          return 'c3'
        } else if (row.d10 >= 10 && row.d10 < 20) {
          return 'c2'
        } else if (row.d10 >= 5 && row.d10 < 10) {
          return 'c1'
        } else if (row.d10 >= 0 && row.d10 < 5) {
          return 'c0'
        } else if (row.d10 < 0) {
          return 'c0'
        } else {
          return ''
        }
      } else if(columnIndex == 12) {
        if (row.d11 >= 90 && row.d11 <= 100) {
          return 'c10'
        } else if (row.d11 >= 80 && row.d11 < 90) {
          return 'c9'
        } else if (row.d11 >= 70 && row.d11 < 80) {
          return 'c8'
        } else if (row.d11 >= 60 && row.d11 < 70) {
          return 'c7'
        } else if (row.d11 >= 50 && row.d11 < 60) {
          return 'c6'
        } else if (row.d11 >= 40 && row.d11 < 50) {
          return 'c5'
        } else if (row.d11 >= 30 && row.d11 < 40) {
          return 'c4'
        } else if (row.d11 >= 20 && row.d11 < 30) {
          return 'c3'
        } else if (row.d11 >= 10 && row.d11 < 20) {
          return 'c2'
        } else if (row.d11 >= 5 && row.d11 < 10) {
          return 'c1'
        } else if (row.d11 >= 0 && row.d11 < 5) {
          return 'c0'
        } else if (row.d11 < 0) {
          return 'c0'
        } else {
          return ''
        }
      } else if(columnIndex == 13) {
        if (row.d12 >= 90 && row.d12 <= 100) {
          return 'c10'
        } else if (row.d12 >= 80 && row.d12 < 90) {
          return 'c9'
        } else if (row.d12 >= 70 && row.d12 < 80) {
          return 'c8'
        } else if (row.d12 >= 60 && row.d12 < 70) {
          return 'c7'
        } else if (row.d12 >= 50 && row.d12 < 60) {
          return 'c6'
        } else if (row.d12 >= 40 && row.d12 < 50) {
          return 'c5'
        } else if (row.d12 >= 30 && row.d12 < 40) {
          return 'c4'
        } else if (row.d12 >= 20 && row.d12 < 30) {
          return 'c3'
        } else if (row.d12 >= 10 && row.d12 < 20) {
          return 'c2'
        } else if (row.d12 >= 5 && row.d12 < 10) {
          return 'c1'
        } else if (row.d12 >= 0 && row.d12 < 5) {
          return 'c0'
        } else if (row.d12 < 0) {
          return 'c0'
        } else {
          return ''
        }
      } else if(columnIndex == 14) {
        if (row.d13 >= 90 && row.d13 <= 100) {
          return 'c10'
        } else if (row.d13 >= 80 && row.d13 < 90) {
          return 'c9'
        } else if (row.d13 >= 70 && row.d13 < 80) {
          return 'c8'
        } else if (row.d13 >= 60 && row.d13 < 70) {
          return 'c7'
        } else if (row.d13 >= 50 && row.d13 < 60) {
          return 'c6'
        } else if (row.d13 >= 40 && row.d13 < 50) {
          return 'c5'
        } else if (row.d13 >= 30 && row.d13 < 40) {
          return 'c4'
        } else if (row.d13 >= 20 && row.d13 < 30) {
          return 'c3'
        } else if (row.d13 >= 10 && row.d13 < 20) {
          return 'c2'
        } else if (row.d13 >= 5 && row.d13 < 10) {
          return 'c1'
        } else if (row.d13 >= 0 && row.d13 < 5) {
          return 'c0'
        } else if (row.d13 < 0) {
          return 'c0'
        } else {
          return ''
        }
      } else if(columnIndex == 15) {
        if (row.d14 >= 90 && row.d14 <= 100) {
          return 'c10'
        } else if (row.d14 >= 80 && row.d14 < 90) {
          return 'c9'
        } else if (row.d14 >= 70 && row.d14 < 80) {
          return 'c8'
        } else if (row.d14 >= 60 && row.d14 < 70) {
          return 'c7'
        } else if (row.d14 >= 50 && row.d14 < 60) {
          return 'c6'
        } else if (row.d14 >= 40 && row.d14 < 50) {
          return 'c5'
        } else if (row.d14 >= 30 && row.d14 < 40) {
          return 'c4'
        } else if (row.d14 >= 20 && row.d14 < 30) {
          return 'c3'
        } else if (row.d14 >= 10 && row.d14 < 20) {
          return 'c2'
        } else if (row.d14 >= 5 && row.d14 < 10) {
          return 'c1'
        } else if (row.d14 >= 0 && row.d14 < 5) {
          return 'c0'
        } else if (row.d14 < 0) {
          return 'c0'
        } else {
          return ''
        }
      } else if(columnIndex == 16) {
        if (row.d15 >= 90 && row.d15 <= 100) {
          return 'c10'
        } else if (row.d15 >= 80 && row.d15 < 90) {
          return 'c9'
        } else if (row.d15 >= 70 && row.d15 < 80) {
          return 'c8'
        } else if (row.d15 >= 60 && row.d15 < 70) {
          return 'c7'
        } else if (row.d15 >= 50 && row.d15 < 60) {
          return 'c6'
        } else if (row.d15 >= 40 && row.d15 < 50) {
          return 'c5'
        } else if (row.d15 >= 30 && row.d15 < 40) {
          return 'c4'
        } else if (row.d15 >= 20 && row.d15 < 30) {
          return 'c3'
        } else if (row.d15 >= 10 && row.d15 < 20) {
          return 'c2'
        } else if (row.d15 >= 5 && row.d15 < 10) {
          return 'c1'
        } else if (row.d15 >= 0 && row.d15 < 5) {
          return 'c0'
        } else if (row.d15 < 0) {
          return 'c0'
        } else {
          return ''
        }
      } else if(columnIndex == 17) {
        if (row.d21 >= 90 && row.d21 <= 100) {
          return 'c10'
        } else if (row.d21 >= 80 && row.d21 < 90) {
          return 'c9'
        } else if (row.d21 >= 70 && row.d21 < 80) {
          return 'c8'
        } else if (row.d21 >= 60 && row.d21 < 70) {
          return 'c7'
        } else if (row.d21 >= 50 && row.d21 < 60) {
          return 'c6'
        } else if (row.d21 >= 40 && row.d21 < 50) {
          return 'c5'
        } else if (row.d21 >= 30 && row.d21 < 40) {
          return 'c4'
        } else if (row.d21 >= 20 && row.d21 < 30) {
          return 'c3'
        } else if (row.d21 >= 10 && row.d21 < 20) {
          return 'c2'
        } else if (row.d21 >= 5 && row.d21 < 10) {
          return 'c1'
        } else if (row.d21 >= 0 && row.d21 < 5) {
          return 'c0'
        } else if (row.d21 < 0) {
          return 'c0'
        } else {
          return ''
        }
      } else if(columnIndex == 18) {
        if (row.d30 >= 90 && row.d30 <= 100) {
          return 'c10'
        } else if (row.d30 >= 80 && row.d30 < 90) {
          return 'c9'
        } else if (row.d30 >= 70 && row.d30 < 80) {
          return 'c8'
        } else if (row.d30 >= 60 && row.d30 < 70) {
          return 'c7'
        } else if (row.d30 >= 50 && row.d30 < 60) {
          return 'c6'
        } else if (row.d30 >= 40 && row.d30 < 50) {
          return 'c5'
        } else if (row.d30 >= 30 && row.d30 < 40) {
          return 'c4'
        } else if (row.d30 >= 20 && row.d30 < 30) {
          return 'c3'
        } else if (row.d30 >= 10 && row.d30 < 20) {
          return 'c2'
        } else if (row.d30 >= 5 && row.d30 < 10) {
          return 'c1'
        } else if (row.d30 >= 0 && row.d30 < 5) {
          return 'c0'
        } else if (row.d30 < 0) {
          return 'c0'
        } else {
          return ''
        }
      }else {
        return ''
      }
    },
    onSubmit() {
      this.nowload()
    },
    nowload() {
      if(this.time == null) {
        this.$message({
          type: "warning",
          message: "请选择时间!"
        });
        return
      }
      this.loading = true
      this.formInline.startTime = this.time[0]
      this.formInline.endTime = this.time[1]

      getNewPayUserAccountAnalysis(this.formInline).then(res => {
        this.tableData = res.data.data;
        this.loading = false;
      })
    },
  },


};
</script>

<style lang="scss" scoped>
/deep/ .el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

/deep/ .el-icon-arrow-down {
  font-size: 12px;
}

/deep/ .customWidthActivity {
  width: 50%;
  background-color: #FFFFFF !important;
}
/deep/ .customViewUser{
  width: 80%;
  background-color: #FFFFFF !important;
}

/deep/ .el-table td{
  border-right: 0px solid #ffffff!important;
  border-bottom: 1px solid #eeeeee!important;
  text-align: center;
}

/deep/ .c10 {
  background: #3a76c8 !important;
}
/deep/ .c9 {
  background: #5485d0 !important;
}
/deep/ .c8 {
  background: #7098d5 !important;
}
/deep/ .c7 {
  background: #7da4d9 !important;
}
/deep/ .c6 {
  background: #9bb8e3 !important;
}
/deep/ .c5 {
  background: #a3bce3 !important;
}
/deep/ .c4 {
  background: #bed0ec !important;
}
/deep/ .c3 {
  background: #d8e3f4 !important;
}
/deep/ .c2 {
  background: #dce7f6 !important;
}
/deep/ .c1 {
  background: #f8f9fd !important;
}
/deep/ .c0 {
  background: #ffffff !important;
}

</style>
